<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    html,
    body {
      width: 100%;
      height: 100%;
      background-color: #0EA9B1;
      overflow: hidden;
    }

    img {
      width: 100%;
      height: auto;
      position: absolute;
      bottom: 0;
      left: 0;
    }

    img:first-child,
    h1 {
      animation: move 2s linear infinite;
    }

    img:last-child {
      animation: move 2s linear 0.3s infinite;
    }


    .sun {
      width: 100px;
      height: 100px;
      /*background-color: pink;*/
      margin: 100px;
      position: relative;
    }

    .sun::before,
    .sun::after {
      content: "";
      position: absolute;
      top: 50%;
      left: 50%;
      width: 50px;
      height: 50px;
      transform: translate(-50%, -50%);
      background: rgba(255, 255, 255, 0.8);
      border-radius: 50%;
      animation: sun 2s infinite;
    }

    .sun::after {
      width: 80px;
      height: 80px;
      background: rgba(255, 255, 255, 0.6);
      animation: sun 3s infinite;
    }

    @keyframes move {
      0% {
        bottom: 0;
      }

      50% {
        bottom: -50px;
      }

      100% {
        bottom: 0;
      }
    }

    @keyframes sun {
      0% {
        transform: translate(-50%, -50%) scale(1);
        box-shadow: 0px 0px 5px rgba(255, 255, 255, 0.7);
      }

      50% {
        transform: translate(-50%, -50%) scale(1.1);
        box-shadow: 0px 0px 30px rgba(255, 255, 255, 0.7);
      }

      100% {
        transform: translate(-50%, -50%) scale(1);
        box-shadow: 0px 0px 5px rgba(255, 255, 255, 0.7);
      }
    }

    h1 {
      position: absolute;
      left: 50%;
      margin-bottom: 661px;
    }
    #main{
      width: 100%;
      height: 100%;
    }
  </style>
</head>

<body>
   <div class="sun"></div>
  <div id="main">
   
      <h1>这是我的项目 我也不知道该写点什么</h1>
  </div>

  <!-- <img src="./1.png" height="300px" width="500px" alt="loading">
         <img src="" height="300px" width="500px" alt="loading"> -->
         <script src="../assets/lib/jquery.js"></script>
         <script src="../assets/lib/jquery.particleground.min.js"></script>
         <script src="../assets/js/home.js"></script>
</body>

</html>